<template>
  <!-- 赛事或活动 报名款 管理 -->
  <div class="pageWrap">
    <el-form>
      <el-form-item label="赛事组别" class="noBot">
        <span
          :class="['span',gId==v.id?'active':'']"
          v-for="(v,i) in groupArr"
          :key="i"
          @click="gId=v.id;getData(1)"
        >{{v.name}}</span>
      </el-form-item>
      <el-form-item label="付款状态" class="noBot">
        <span
          :class="['span',state==v.state?'active':'']"
          v-for="(v,i) in stateArr"
          :key="i"
          @click="state=v.state;getData(1)"
        >{{v.name}}</span>
      </el-form-item>
      <el-form-item>
        <div class="msgBox">
          <el-input placeholder="请输入姓名查询" v-model="name" class="s_ipt" clearable>
            <template slot="append">
              <p style="padding: 0 20px;line-height: 38px;" @click="getData(1)">搜索</p>
            </template>
          </el-input>
          <div class="price">
            <span>总收入：{{price.price}}</span>
            <span class="servicePrice">总手续费：{{price.servicePrice}}</span>
          </div>
        </div>
      </el-form-item>
    </el-form>
    <el-row class="allCon">
      <el-table
        ref="table"
        :data="moneyData"
        row-key="index"
        class="tab"
        @selection-change="handleSelectionChange"
      >
        <!-- <el-table-column type="selection" width="55" v-if="state!=0" :key="10"></el-table-column> -->
        <el-table-column prop="index" label="序号" width="80" :key="1"></el-table-column>
        <el-table-column prop="memberName" label="姓名" :key="2"></el-table-column>
        <el-table-column prop="phone" label="手机号" :key="3"></el-table-column>
        <el-table-column prop="orderNum" label="订单号" v-if="state!=3" :key="4"></el-table-column>
        <el-table-column prop="price" :label="state!=3?'支付金额':'退款金额'"></el-table-column>
        <el-table-column prop="servicePrice" label="手续费" v-if="state==1" :key="5"></el-table-column>
        <el-table-column prop="orderDate" :label="state!=3?'交易时间':'付款时间'" :key="6"></el-table-column>
        <el-table-column prop="creatTime" label="退款申请时间" v-if="state==3" :key="7"></el-table-column>
        <el-table-column label="操作" width="150" v-if="state==3" :key="8">
          <template slot-scope="{row}">
            <el-button type="text" @click="editRefund(row)" v-if="state==3">修改状态</el-button>
            <el-button type="text" @click="toogleExpand(row)" v-if="state==3">查看原因</el-button>
          </template>
        </el-table-column>
        <el-table-column type="expand" width="1" v-if="state==3" :key="9">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="退款原因：">
                <span>{{ props.row.info }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :hide-on-single-page="true"
        @current-change="getData"
        :current-page.sync="curr"
        :page-size="10"
        layout="prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-row>
    <el-dialog
      title="退费申请"
      :visible.sync="refundAlert"
      width="50%"
      :before-close="alertClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form>
        <el-form-item label="退款原因：">{{retundData.info}}</el-form-item>
        <!-- <el-form-item label="支付金额：">{{retundData.price}}元</el-form-item>
        <el-form-item label="预计退款金额：">{{retundData.suggPrice}}元</el-form-item>
        <el-form-item label="实际退款金额：">
          <el-input v-model="refundPrice" class="refundIpt" placeholder="请输入实际退款金额"></el-input>
          <p class="tips">注 * ：以实际退款金额为准</p>
        </el-form-item> -->
        <el-form-item label="退款状态：">
          <el-select
            v-model="refundState"
            placeholder="请选择"
            @change="refundState==2?refundPrice='':''"
          >
            <!-- <el-option label="已退费" value="1"></el-option> -->
            <el-option label="审核通过/已退费" value="1"></el-option>
            <el-option label="审核不通过" value="2"></el-option>
          </el-select>
          <!-- <p class="tips">注 * ：审核通过即以实际金额进行退款，预计2个小时内到账</p> -->
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="alertClose">取 消</el-button>
        <el-button type="primary" @click="subRefund()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
var stateArr = [
  { name: "待支付", state: 0 },
  { name: "已支付", state: 1 },
  { name: "已退费", state: 2 },
  { name: "待退费", state: 3 },
  { name: "不予退费", state: 4 },
];
export default {
  data() {
    return {
      // getRowKeys(row) {
      //   return row.applyInfoId; // 每条数据的唯一识别值
      // },
      refundAlert: false,
      moneyData: [],
      groupArr: [],
      gId: 0,
      curr: 1,
      total: 0,
      name: "",
      price: { price: 0, servicePrice: 0 },
      stateArr,
      state: 1,
      retundData: {},
      refundState: "",
      refundPrice: "",
    };
  },
  methods: {
    // table 多选
    handleSelectionChange(val) {
      // this.multipleSelection = val;
      console.log(val);
    },
    // 获取赛项
    getGArr() {
      this.$axios
        .get("/sbr/match/getMatchInfos/" + sessionStorage.getItem("MandA"))
        .then((res) => {
          let rr = res.data.data;
          rr.matchInfoLists.unshift({ id: 0, name: "全部" });
          this.groupArr = rr.matchInfoLists;
        });
    },
    getData(s) {
      console.log(s)
      this.moneyData = [];
      if (s) this.curr = s;
      else this.curr=1
      let m = sessionStorage.getItem("MandA");
      let oo = {
        orgId: this.$Base64.encode(this.$orgId),
        matchId: m,
        page: this.curr,
        groupId: this.gId,
        name: this.name,
        state: this.state,
      };
      this.$axios
        .get("/sbr/signUp/order/getPersonSignUpByOrgId", { params: oo })
        .then((res) => {
          let rr = res.data.data;
          this.price = { price: rr.numPrice, servicePrice: rr.servicePrice };
          this.total = rr.listSize;
          rr.list.forEach((v, i) => {
            v.index = i + 1;
            v.memberName = v.memberName ? v.memberName : v.nikeName;
          });
          this.moneyData = rr.list;
        });
    },
    // 展开行 查看原因
    toogleExpand(row) {
      let $table = this.$refs.table;
      $table.toggleRowExpansion(row);
    },
    // 退费弹框关闭 清空弹框数据
    alertClose() {
      this.refundAlert = false;
      this.retundData = {};
    },
    editRefund(row) {
      // console.log(row);
      this.$axios
        .get("/sbr/applyInfo/getRefundPrice?id=" + row.id)
        .then((res) => {
          let rr = res.data.data;
          this.retundData = row;
          this.retundData.suggPrice = rr;
          this.refundAlert = true;
        });
    },
    // 确认退款
    subRefund() {
      if (this.refundState === "") {
        this.$message.error("请选择退款状态");
        return false;
      }
      // if (this.refundState == 1 && !this.refundPrice) {
      //   this.$message.error("请填写实际退款金额");
      //   return false;
      // }
      // if (isNaN(this.refundPrice)) {
      //   this.$message.error("请实际退款金额需为数字");
      //   return false;
      // }
      // if (Number(this.refundPrice) > Number(this.retundData.price)) {
      //   this.$message.error("实际退款金额不可大于支付金额");
      //   return false;
      // }
      // if (this.refundState == 2) {
      //   this.refundPrice = "";
      // }
      let op =
        this.$orgId +
        "&" +
        this.retundData.id +
        "&" +
        Number(this.refundPrice) +
        "&" +
        this.refundState;
      // console.log(op);
      op = this.$Base64.encode(op);
      this.$axios.get("/sbr/apply/putOrderOut/" + op).then((res) => {
        let rr = res.data.data;
        this.$message.info(rr);
        this.refundAlert = false;
        this.retundData = {};
        this.getData(1);
      });
    },
  },
  created() {
    this.getGArr();
    this.getData();
  },
};
</script>
<style scoped>
.noBot {
  margin-bottom: 0;
}
.pageWrap >>> .el-table__expand-column {
  display: none;
}
.s_ipt >>> .el-input-group__append {
  cursor: pointer;
  background-color: #409eff;
  color: #fff;
  padding: 0;
}
.span {
  padding: 0 12px;
  line-height: 25px;
  display: inline-block;
  cursor: pointer;
  margin-right: 6px;
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid transparent;
}
.span.active {
  border-color: #409eff;
  border-radius: 12px;
  color: #409eff;
}
.price {
  float: right;
}
.servicePrice {
  margin-left: 20px;
}
.allM {
  line-height: 50px;
  font-size: 25px;
  border-bottom: 1px solid #fff;
}
.ssf {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}
.allCon {
  /* width: calc(100% - 20px); */
  margin: 10px auto;
  padding: 10px;
  background-color: #fff;
}
.tab {
  width: 100%;
}
.s_ipt {
  width: 300px;
}
.tips {
  color: red;
}
.refundIpt {
  width: 200px;
}
</style>